<template>
    <div>
        <Row>
            <Card>
                <Form :model="list" :label-width="80">
                    <row>
                        <Col span="4">
                        <FormItem label="设备编号">
                            <Input v-model="device" placeholder="请输入设备编号"></Input>
                        </FormItem>
                        </Col>
                        <Col span="4">
                        <FormItem label="站点编号">
                            <Input v-model="site" placeholder="请输入站点编号"></Input>
                        </FormItem>
                        </Col>
                        <Col span="4">
                        <FormItem label="站点类别">
                            <Select v-model="type" placeholder="请选择站点类别">
                                <Option value="gas">加气站</Option>
                                <Option value="vaporizing">气化站</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col span="4">
                        <FormItem label="订单状态">
                            <Select v-model="situation" placeholder="请选择订单状态">
                                <Option value="not-active">未激活</Option>
                                <Option value="inuse">正在使用</Option>
                                <Option value="active">已激活</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        &nbsp;
                        <Button type="primary" icon="ios-search">搜索</Button>
                        <Button type="primary" icon="plus-circled" @click.prevent.stop="showAdd()">增加</Button>
                        <Button type="primary" icon="ios-trash">删除</Button>
                    </row>
                </Form>
                <Table border :columns="columns" :data="data"></Table>
                <Page :total="100" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>

                <!--添加-->
                <Modal
                        v-model="showAddModal"
                        title="添加"
                        ok-text="保存"
                        width="650">
                    <Form :model="addWord" ref="addWord" label-position="right" :label-width="80"  >
                        <Row>
                            <Col span="12">
                            <Form-item label="设备编号">
                                <Input v-model="addWord.device"></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="站点编号">
                                <Input v-model="addWord.site"></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <FormItem label="站点类别">
                                <Select v-model="type" placeholder="请选择站点类别">
                                    <Option value="gas">加气站</Option>
                                    <Option value="vaporizing">气化站</Option>
                                </Select>
                            </FormItem>
                            </Col>
                            <Col span="12">
                            <Form-item label="注册码">
                                <Input v-model="addWord.code"></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <FormItem label="订单状态">
                                <Select v-model="situation" placeholder="请选择订单状态">
                                    <Option value="not-active">未激活</Option>
                                    <Option value="inuse">正在使用</Option>
                                    <Option value="active">已激活</Option>
                                </Select>
                            </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    export default {
        data() {
            return {
                list: {},
                device:'',
                site:'',
                type:'',
                situation:'',
                addWord: {
                    device:'',
                    site:'',
                    type:'',
                    code:'',
                    situation:''
                },
                showAddModal:false,
                formItem: [
                    {
                        input: '',
                        select:''
                    }
                ],
                num:1,
                size:10,
                total:40,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '设备编号',
                        key: 'name'
                    },
                    {
                        title: '站点编号',
                        key: 'age'
                    },
                    {
                        title: '设备类型',
                        key: 'address'
                    },
                    {
                        title: '注册码',
                        key: 'num'
                    },
                    {
                        title: '状态',
                        key: 'situation'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 160,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'information-circled',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            /*console.log(JSON.stringify(params));*/
                                            this.goToDetail(params);
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        icon: 'alert'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '修改')
                            ]);
                        }
                    }
                ],
                data: [
                    {
                        name: '李明',
                        age: '1111111',
                        address: '储罐',
                        num:'112222',
                        situation:'正常'
                    }
                ]
            }
        },
        methods: {
            showAdd() {
                this.showAddModal = true;
            },
            goToDetail(params) {
                this.$router.push({path: `/essential/details/${params.row.name}`});
            },
            remove (index) {
                this.data.splice(index, 1);
            },
            changePage(num){
                this.num = num;
                this.getList(this.size,num)
            },
            changeSize(size) {
                this.size = size;
                this.getList(size,this.num)
            },
            getList(size,num) {
                let params = {
                    pageSize: size,
                    pageStart: num
                };
                api.fetchPost(api.path.alarmPage, params).then((data) => {
                    if (data.code = 10000) {
                        this.$emit('hideLoading');
                        this.loading = false;
                        this.total = data.data.total;
                        this.data1 = data.data.data;
                    } else {
                        this.$Message.error(data.msg);
                    }
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            }
        }
    }
</script>
